<template>
	<div>
		<el-form :model="user" :rules="rules" ref="formRef" label-width="120px">
			<el-form-item label="用户名：" prop="username">
				<el-input v-model="user.username" :disabled="isEdit"></el-input>
			</el-form-item>
			<el-form-item label="密码：" prop="password">
				<el-input v-model="user.password" type="password"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" @click="submitForm" :loading="loading">登录</el-button>
			<el-button @click="dialogVisible = false">注册</el-button>
		</span>
	</div>
</template>

<script>
	import axios from 'axios';
	export default {
		name: 'EditType',
		props: {
			title: {
				type: String,
				default: '登录'
			},
			formLabelWidth: {
				type: String,
				default: '120px'
			},
			isEdit: {
				type: Boolean,
				default: false
			},
			editDialogVisible: Boolean
		},
		data() {
			return {
				dialogVisible: false,
				loading: false,
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				},
				user: {
					username: '',
					password: ''
				}
			}
		},
		computed: {
			dialogTitle() {
				return this.isEdit ? '编辑分类' : '添加分类';
			}
		},
		methods: {

			submitForm() {
				console.log(this.user);
				let url = ''
				if (this.isEdit == true) { //isEdit为true，则为更改
					url = 'http://localhost:8080/equipType/signUp';
				} else {
					url = 'http://localhost:8080/login/signIn';
				}
				axios.post(url,
						this.user, {
							headers: {
								'Content-Type': 'application/json'
							}
						}
					)
					.then(response => {
						if (response.data.code == 200) {
							this.$message({
								type: 'success',
								message: response.data.message
							});

							this.onClose();
						} else {
							this.$message({
								type: 'error',
								message: response.data.message
							});
						}
					})
					.catch(error => {
						this.$message({
							type: 'info',
							message: '已取消更改'
						});
					});
			}
		},
		watch: {
			form: {
				handler(newVal) {
					// 当传入的表单数据发生变化时，更新内部的弹窗显示状态
					if (newVal) {
						this.dialogVisible = true;
					}
				},
				deep: true
			}
		}
	}
</script>
